<template>
  <div class="about">
    <el-container>
      <el-main>
        <div class="center">
          <!-- 欢迎登录 -->
          <div class="center-top">
            <h1>欢迎登录</h1>
          </div>
          <!-- 登录框 -->
          <div class="center-ul">
            <ul>
              <li class="active">手机号登录</li>
              <li class="list">验证码登录</li>
            </ul>
          </div>
          <!-- 输入框 -->
          <div class="srk">
            <el-input placeholder="请输入手机号码" style="width: 400px;margin-bottom: 30px;"></el-input>
            <br />
            <el-input placeholder="请输入密码" show-password style="width: 400px;"></el-input>
          </div>
          <!-- 登录按钮 -->
          <div class="btn-box">
            <button class="LoaderButton from-item-btn" type="submit">登录</button>
          </div>
          <!-- 邮箱= -->
          <div class="to-forgot">
            <a href style="color: rgb(81, 135, 255);">邮箱登录</a>
            <a href style="color: #333">忘记密码</a>
          </div>
          <!-- 右侧 -->
          <div class="to-right">
            <p>还不是Bihu的用户？</p>
            <p>马上注册，掌握一手资讯。</p>
            <br />
            <a href>免费注册</a>
          </div>
        </div>
      </el-main>
      <!-- 底部公共部分 -->
      <el-footer>
        <div class="footer">
          <div class="footer-link">
            <a
              target="_blank"
              href="https://home.bihu.com"
              rel="nofollow me noopener noreferrer"
            >关于我们</a>
            <a target="_blank" href="/ContactUs">联系我们</a>
            <a
              target="_blank"
              href="https://home.bihu.com/agreement/HelpCenter.html"
              rel="nofollow me noopener noreferrer"
            >帮助中心</a>
            <a
              target="_blank"
              href="https://home.bihu.com/agreement/index.html"
              rel="nofollow me noopener noreferrer"
            >用户协议</a>
          </div>
          <div class="footer-record">
            <p class="record">
              ©2020 - BIHU.COM All Rights Reserved
              <span>
                无锡巽雷信息科技有限公司&nbsp;
                <a
                  target="_blank"
                  href="http://www.beian.miit.gov.cn/"
                >苏ICP备20006983号-8</a>&nbsp;
              </span>
            </p>
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<style scoped>
.el-main {
  width: 100%;
  height: 550px;
}
.center {
  width: 1170px;
  height: 510px;
  margin: 0 auto;
}
.center-top {
  padding: 40px 105px 20px;
}
.center-top h1 {
  font-size: 36px;
  color: #5a6169;
  font-weight: 500;
}
.center-ul {
  margin-left: 105px;
}
.center-ul li {
  display: inline;
  margin-right: 24px;
}
.center-ul .active {
  color: #007bff;
  border-bottom: 3px solid #007bff;
}
.center-ul .list {
  color: #bcc7d7;
}
.srk {
  margin-left: 90px;
  margin-top: 40px;
}
.btn-box button {
  height: 41px;
  border-radius: 4px;
  width: 400px;
  background: #007bff;
  margin-top: 30px;
  color: #fff;
  margin-left: 105px;
  border: transparent;
}
.to-forgot {
  margin-top: 30px;
}
.to-forgot a {
  margin-left: 105px;
  display: inline;
  margin-right: 165px;
  font-size: 14px;
}
.to-right {
  float: right;
  margin-top: -240px;
  margin-right: 340px;
}
.to-right p {
  color: #5a6169;
  font-size: 14px;
  margin-bottom: 10px;
}
.to-right a {
  font-size: 14px;
  color: #007bff;
}
.footer {
  width: 100%;
  text-align: center;
  color: #5a6169;
}
.footer .footer-link {
  margin-top: 20px;
}
.footer .footer-link a {
  color: #5a6169;
  padding: 0 40px;
}
.footer .footer-record .record {
  text-align: center;
  font-size: 13px;
  margin-top: 18px;
  padding-bottom: 17px;
  color: #5a6169;
}
.footer .footer-record .record span {
  display: block;
  margin-top: 10px;
  color: #5a6169;
}
.footer .footer-record .record a {
  font-size: 11px;
  color: #5a6169;
}
</style>
